<template>
  <div class="outsize" :style="{ height: h + 'px' }">
    <div class="kuang">
      <div class="topcss">
        <span>用户名：</span>
        <el-input clearable style="width: 200px; margin-right: 15px" />
        <el-button>搜索</el-button>
      </div>
      <div class="tableTop">
        <div>列表</div>
        <div>
          <el-button type="primary" @click="handleAdd" size="small"
            >新增</el-button
          >
        </div>
      </div>
      <div class="maincss">
        <el-table :data="tableData" style="width: 100%" v-loading="loading">
          <el-table-column
            fixed
            prop="id"
            aline="center"
            label="id"
            width="80"
          />
          <el-table-column prop="username" label="用户名称" width="120" />
          <el-table-column prop="create_time" label="创建时间" width="180" />
          <el-table-column prop="update_time" label="更新时间" width="180" />
          <el-table-column prop="role" label="权限" width="120">
            <template #default="scoped">
              {{ scoped.row.role.name }}
            </template>
          </el-table-column>
          <el-table-column prop="avatar" label="头像" width="100">
            <template #default="scoped">
              <el-avatar :src="scoped.row.avatar" />
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="120" >
            <template #default="scoped">
              {{ stateTypeStr[scoped.row.status] }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template #default="scoped">
              <el-button link type="primary" @click="handleEdit(scoped.row)"
                >编辑</el-button
              >
              <el-popconfirm
                confirm-button-text="是"
                cancel-button-text="否"
                title="是否删除?"
                @confirm="handleDel(scoped.row.id)"
              >
                <template #reference>
                  <el-button link type="primary">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="bottomcss">
        <Pagination
          v-model:page="paging.pageNum"
          v-model:size="paging.pageSize"
          :total="total"
          @update:page="updatapage"
          class="mt-3"
        />
      </div>
        <!-- v-if="isShowform" -->
      <FormDrawer
        :title="drawerData.title" 
        ref="formDrawerRef"
        @submit="handlsubmit"
      >
        <!-- <el-form
          :model="formData"
          ref="formRef"
          :rules="rules"
          label-width="120px"
          :inline="false"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="formData.username" clearable></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="formData.password" clearable></el-input>
          </el-form-item>
          <el-form-item label="角色ID" prop="role_id">
            <el-input v-model="formData.role_id" clearable></el-input>
          </el-form-item>
          <el-form-item label="是否启用" prop="status">
            <el-radio-group v-model="formData.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="头像" prop="avatar">
            <el-input v-model="formData.avatar" clearable></el-input>
          </el-form-item>
        </el-form> -->
        
        <handleForm
          v-if="drawerData.type == 'handleForm'"
          ref="handleFormRef"
          :edit-val="editVal"
        />
      </FormDrawer>
    </div>
  </div>
</template>

<script lang="ts" setup>
import axios from "@/services/request";
import handleForm from "./components/handleForm.vue";
import { _stateTypeStr }  from './config'

const windowHeight = window.innerHeight || document.body.clientHeight;
const h = windowHeight - 60 - 44 - 40;
// console.log("h", h);

const tableData = ref<any>([]);
const paging = reactive<any>({
  pageNum: 1,
  pageSize: 10,
});
const total = ref<any>();
const loading = ref<boolean>(false); //table加载loading

const formDrawerRef = ref<any>(null); //弹窗

// drawerData
const drawerData = reactive({
  type:'',
  title: '',
} as any)

const handleFormRef = ref<any>(null)

const stateTypeStr = computed(()=>{
  return _stateTypeStr
})

const formRef = ref<any>(null);
// form
type formDataType = {
  username: any;
  password: any;
  role_id: any;
  status: any;
  avatar: any;
};
const formData = reactive<formDataType>({
  username: "",
  password: "",
  role_id: 38,
  status: 1,
  avatar: "http://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/public/5f50505928e60.jpg",
});

// 弹窗
const isShowform  =ref<boolean>(false)


// 弹窗数值内的 规则
const rules = ref({
  username: [
    {
      required: true, // 必填
      message: "请输入", //提示信息
      trigger: "blur", // 触发条件
    },
  ],
  password: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  role_id: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  status: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
});

// 更新页码
const updatapage = (e: any) => {
  paging.pageNum = e;
  getList(paging.pageNum);
};

// 获取列表
const getList = (page: number) => {
  loading.value = true;
  axios
    .get(`/admin/manager/${page}`, {
      data: {
        limit: 10,
        keyword: "ceshi",
      },
    })
    .then((res: ResponseData) => {
      console.log("res", res);
      tableData.value = res.data.list;
      total.value = res.data.totalCount;
      loading.value = false;
    })
    .finally(() => {});
};
// console.log("paging.pageNum", paging.pageNum);
getList(paging.pageNum);

const valueEmpty = () => {
  formData.username = "";
  formData.password = "";
  formData.role_id = 38;
  formData.status = 1;
  formData.avatar = "http://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/public/5f50505928e60.jpg";
};

// 添加
const handleAdd = () => {
  // isShowform.value = true;
  formDrawerRef.value.open();
  drawerData.type = 'handleForm'
  drawerData.title = '新增'
};

// 页面传参
const editVal = ref<object>({})

// 编辑
const handleEdit = (val:any) => {
  // isShowform.value = true;
  editVal.value = val
  // console.log("editVal",editVal.value);
  formDrawerRef.value.open();
  drawerData.type = 'handleForm'
  drawerData.title = '编辑'
};
const editAdmin = (id:number,val:any) =>{
  return axios.post(`admin/manager/${id}`,val)
}

// 提交事件
const handlsubmit = () => {
  let refVal
  if(drawerData.type == 'handleForm'){
    refVal = handleFormRef.value
  }
  refVal?.handleSubmit?.({
    passCallback: () => {
      formDrawerRef.value.showLoading()
      getList(paging.pageNum);
    },
    thenCallback: () => {
      formDrawerRef.value.close();
    },
    catchCallback: () => {},
    finallyCallback: () => {
      formDrawerRef.value.hideLoading();
      getList(paging.pageNum);
    },
  })
  
  // formRef.value.validate((valid: any) => {
  //   if (!valid) return;
  //   // 新增数据
  //   formDrawerRef.value.showLoading();

  //   // console.log('formData',formData)

  //   // addAdmin(formData)
  //   //   .then((res: any) => {
  //   //     // console.log("res", res);
  //   //     if (res.msg == "ok") {
  //   //       ElMessage.success("添加成功");
  //   //       getList(paging.pageNum);
  //   //       formDrawerRef.value.close();
  //   //     } else {
  //   //       ElMessage.warning("添加失败");
  //   //     }
  //   //   })
  //   //   .finally(() => {
  //   //     formDrawerRef.value.hideLoading();
  //   //   });
  // });

};

// 删除
const handleDel = (id: Number) => {
  console.log("click");
  axios.post(`/admin/manager/${id}/delete`).then((res:any) => {
    if(res.msg == 'ok'){
      ElMessage.success('删除成功')
      getList(paging.pageNum);
    }
  });
};

</script>

<style scoped lang="less">
.outsize {
  height: calc(100vh - 104);
  padding: 10px;
  background-color: #f6f6f6;
  .kuang {
    height: 100%;
    width: 100%;
    position: relative;
    .topcss {
      display: flex;
      align-items: center;
      height: 50px;
      padding: 10px;
      background-color: white;
      border-radius: 5px;
      position: absolute;
      top: 0px;
      right: 0px;
      left: 0px;
    }
    .tableTop {
      border-bottom: 1px solid #efefef;
      margin: 10px 0px 0px 0px;
      padding: 10px 10px 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      height: 40px;
      background-color: #ffffff;
      position: absolute;
      top: 50px;
      right: 0px;
      left: 0px;
    }
    .maincss {
      margin: 10px 0 0 0;
      padding: 10px;
      background-color: white;
      border-radius: 5px;
      position: absolute;
      top: 90px;
      right: 0px;
      left: 0px;
      bottom: 50px;
      overflow-y: auto;
    }
    .bottomcss {
      background-color: #ffffff;
      position: absolute;
      height: 50px;
      left: 0px;
      right: 0px;
      bottom: 0;
      @apply flex items-center justify-end;
    }
  }
}
</style>
